<template>
  <div class="box3">
    <Comprehensive />
    <div class="screen">
      <div class="bnts">
        <Bnt @select="select" :bnts="item" v-for="(item, i) in bnts" :key="i" />
      </div>
      <div class="line"></div>
      <div class="only">
        <p>
          <van-checkbox v-model="checked"></van-checkbox>
          <span>只看有内容的评价</span>
        </p>
      </div>
      <div class="text">
        <Texts v-for="(item, i) in discuss2" :key="i" :discuss="item" />
      </div>
    </div>
  </div>
</template>

<script>
import Comprehensive from "./Comprehensive.vue";
import Bnt from "./Bnt.vue";
import Texts from "./Texts.vue";
import { get } from "@/utils/tool/tool";
export default {
  components: {
    Comprehensive,
    Bnt,
    Texts,
  },
  data() {
    return {
      checked: true,
      discuss: [],
      discuss2: [],
      bnts: [
        {
          txt: "#fff",
          tit: "全部",
          color: "#1989f9",
        },
        {
          txt: "#738393",
          tit: "满意",
          color: "#cdedf8",
        },
        {
          txt: "#738393",
          tit: "不满意",
          color: "#e8ecef",
        },
      ],
      type: "全部",
    };
  },
  methods: {
    select(v) {
      this.type = v;
      if (this.type == "满意") {
        this.discuss2 = this.discuss.filter((v) => {
          return v.rateType == 0;
        });
      } else if (this.type == "不满意") {
        this.discuss2 = this.discuss.filter((v) => {
          return v.rateType == 1;
        });
      } else {
        this.discuss2 = this.discuss;
      }
    },
  },
  created() {
    this.discuss = get("discuss").data;
    this.discuss2 = this.discuss;
    this.bnts[0].num = this.discuss.length;
    this.bnts[1].num = this.discuss.filter((v) => {
      return v.rateType == 0;
    }).length;
    this.bnts[2].num = this.discuss.filter((v) => {
      return v.rateType == 1;
    }).length;
  },
};
</script>

<style lang="less" scoped>
.box3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f2f6f9;
  .screen {
    background-color: #fff;
    flex: 1;
    margin-top: 20px;
    border-top: 1px solid #d2d2d2;
    border-bottom: 1px solid #cccccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    .bnts {
      height: 60px;
      display: flex;
      align-items: center;
      width: 90%;
    }
    .line {
      border-bottom: 1px solid #ccc;
      width: 90%;
    }
    .only {
      height: 60px;
      width: 100%;
      line-height: 60px;
      padding-left: 20px;
      p {
        display: flex;
        span {
          color: #b5b6b5;
          margin-left: 10px;
        }
      }

      border-bottom: 1px solid #000;
    }
    .text {
      flex: 1;
      width: 100%;
    }
  }
}
</style>